<template>
	<div>
		<div class="head2">
			<div>
				<router-link to="/pc/home">
					<h3><i class="el-icon-notebook-2"></i>&nbsp;头像更新</h3>
				</router-link>
			</div>
		</div>
		<div style="height: 10px;"></div>
		<div style="width: 90%; min-height: 30vh; display:flex;   justify-content:center;  align-items:center; ">
			<div style="width: 40vw;">
				<div>
					<div style="width: 25vw; height: 25vw; border: 1px solid #DCDFE6;">
						<img :src="'http://127.0.0.1/api/public/showimg/'+img" lazy="true"
							style="width: 100%;height: 100%;">
						</img>

					</div>
					<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
						:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
						action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
						<h3>点击这里更新图片</h3>
					</el-upload>
				</div>
				<div style="margin-top: 12px; display: flex;justify-content: flex-end;">
					<div><el-button type="danger" v-on:click="update()">确认更新头像</el-button></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Updatepic',
		data() {
			return {
				form: {},
				fileList: [],
				img: '',
			}
		},
		methods: {
			handleChange: function(file, fileList) {
				this.fileList = fileList;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},

			update() {
				var fd = new FormData;
				if (this.fileList.length > 0 && this.fileList[0].raw != null) {
					fd.append("mypic", this.fileList[0].raw);
				}

				this.$postf("/api/user/updatePic", fd).then((resp) => {
					this.$store.state.pic = resp.data.data;
					this.imgSrc = "/api/public/showimg/" + this.$store.state.pic;
					this.$message.error('上传图片成功 ....' + resp.data.data);
				})
				this.$router.push('/pc/user');
			}
		},
		created() {
			this.img = localStorage.getItem('img');
		},
	}
</script>
<style scoped>

</style>